<template>
  <view class="oto-push-box">
    <view class="oto-push">
      <view class="oto-push-mod" v-show="show" catchtouchmove="true" @click.stop="click"></view>
      <image class="oto-push-button" src="/static/pages/square/add.png" @click.stop="click" :style="[showButton]" />
      <template v-for="(item, index) in list">
        <view class="oto-push-button-item" :style="[item.style]" :key="index" @click="toPage(item.path)">
          <view class="item-body">
            <view class="item-text" v-show="show">
              {{ item.text }}
            </view>
            <image :src="item.src" />
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      justButton: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        show: false,
        list: [
          {
            text: '发布动态',
            src: '/static/pages/square/dynamic.png',
            style: {
              top: '10rpx'
            },
            path: '/module/dynamic/pages/DynamicPublish/index'
          }
        ],
        showButton: {
          transform: 'rotate(0deg)'
        }
      };
    },
    methods: {
      toPage(url) {
        uni.navigateTo({
          url
        });
        this.click();
      },
      click(e) {
        if (this.justButton) {
          return this.$emit('click', e);
        }
        this.show = !this.show;
        if (this.show) {
          this.showButton.transform = 'rotate(-45deg)';
          this.list.forEach((item, index) => {
            this.list[index].style.transition = 'top 300ms ease-out';
            if (index === 0) {
              this.list[index].style.top = `-${34 + 90}rpx`;
            } else {
              this.list[index].style.top = `-${index * 80 + (index + 1) * 34 + 90}rpx`;
            }
          });
        } else {
          this.list.forEach((item, index) => {
            this.list[index].style.transition = 'top 300ms ease-out';
            this.list[index].style.top = `10rpx`;
          });
          this.showButton.transform = 'rotate(0deg)';
        }

        console.log(this.list);
        this.$emit('click', e);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-push-box {
    position: fixed;
    right: 32rpx;
    bottom: 160rpx;
    z-index: 9999;
  }

  .oto-push {
    position: relative;
    z-index: 999;
    width: 90rpx;
    height: 90rpx;

    .oto-push-mod {
      position: fixed;
      width: 100vw;
      height: 100vh;
      z-index: 300;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.92);
    }

    .oto-push-button {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      position: absolute;
      z-index: 900;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50rpx;
      color: #fff;
      transition: transform 300ms ease-out;
      transform-origin: center center;
    }

    .oto-push-button-item {
      z-index: 600;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 10rpx;
      display: flex;
      align-items: center;

      .item-body {
        position: relative;
        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          box-shadow: 0px 10rpx 18rpx rgba(168, 168, 168, 0.18), inset 0px 0px 8rpx 20rpx rgba(28, 207, 171, 0.05);
          border-radius: 42px;
        }

        .item-text {
          position: absolute;
          left: -138rpx;
          top: 50%;
          transform: translateY(-50%);
          padding: 8rpx 12rpx 10rpx 14rpx;
          color: rgba(126.44, 126.44, 126.44, 1);
          font-size: 24rpx;
          font-weight: 400;
          border-radius: 26rpx;
          opacity: 1;
          border: 2rpx solid rgba($color: #1ccfab, $alpha: 0.39);
          background: rgba(196, 196, 196, 0);
        }
      }
    }
  }
</style>
